<template>
  <div>
    <el-row :gutter="40" class="panel-group">
      <el-col :lg="6" class="card">
        <div class="card-body" style="height: 150px;background-color: white;padding: 10px 20px;color: #a6a6a6">
          <el-row :gutter="10" style="padding: 10px">
            <el-col :lg="12" style="height: 30px;line-height: 30px">成功播放次数</el-col>
            <el-col :lg="12">
              <div class="svg-box" style="background-color: #e5ecff;border-radius: 50%;width: 30px;height: 30px;padding: 7px;float: right">
                <svg-icon icon-class="play" style="color: #5684fc;font-size: 16px" class-name="card-icon"/>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :lg="24">
              <div class="number" style="font-size: 25px;padding: 0 10px 20px 10px;color: #2d2f33">
                <count-to :start-val="0" :end-val="10000" :duration="1000" class="card-panel-num"/>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :lg="12">
              <div class="sub-title">成功率:<span style="color: #08d774">&nbsp{{99}}%</span></div>
            </el-col>
            <el-col :lg="12">
              <div style="text-align: right">失败次数:<span style="color: #ed0b21">&nbsp{{10}}&nbsp</span></div>
            </el-col>
          </el-row>
        </div>
        <div class="card-bottom" style="width: 100%;height: 30px;background-color: #5d88fc;"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "card"
  }
</script>
<style scoped>
</style>
